import React, { Component,createRef, useRef } from 'react'
// 除了箭头函数方式是null 其他得调用api 在获取的时候三种方式各不相同

 class PAage7 extends Component {
    constructor(props){
        super(props)
        this.qq=createRef()
        this.ww=createRef()
        this.ee=null
    }
    op(){
        this.refs.qq.innerHTML='qq'
        this.ww.current.innerHTML='098'
        this.ee.innerHTML='333'
    }
    render() {
      return (
        <div>
        <div>class组件的Ref的常规使用</div>
        <div ref='qq'>11</div>
        <div ref={this.ww}>22</div>
        <div ref={(e)=>{this.ee=e}}>33</div>
        <button onClick={()=>{this.op()}}>改变内容</button>
        </div>
      )
    }
}
 function PageQQ7() {
 const iu=useRef()
 const change=()=>{
    iu.current.innerHTML='jkhjk'
 }
  return (
    <div>
        <div ref={iu}>11</div>
        <button onClick={change}>改变useRef</button>
    </div>
  )
}

export default function Page7() {
  return (
    <div>
      <h2>class的ref的使用</h2>
      <PAage7></PAage7>
      <h2>useRef的使用</h2>
      <PageQQ7></PageQQ7>
    </div>
  )
}
